<template>
	<view>
		<titleTop @selCourse="getCourse" :currCourse="currCourse"></titleTop>
		<view class="record_div">
			<view class="top_div">
				<text>记录报告</text>
				<text>昨日题量:30</text>
				<text>排名:{{userInfo.ranking}}</text>
			</view>
			<view class="cont_div">
				<navigator class="cont_item_div"
				           url="../makerecord/makerecord">
					<view style="text-align: center;"> 
						<image src="../../static/new_icon_tk_ztjl.png"></image>
					</view>
					<text class="bottom_text one_text">做题记录</text>
				</navigator>
				<navigator class="cont_item_div"
				            url="../collectList/collectList">
					<view style="text-align: center;">
						<image src="../../static/icon_answer.png"></image>
					</view>
					<text class="bottom_text">我的收藏</text>
				</navigator>

					<navigator class="cont_item_div" :url="'../errorList/errorList?cid='+this.cid+'&cname='+this.cname">
					<view style="text-align: center;">
						<image src="../../static/icon_sheet.png"></image>
					</view>
					<text class="bottom_text">错题集</text>
				</navigator>
				<navigator class="cont_item_div" url="../noteList/noteList">
					<view style="text-align: center;">
						<image src="../../static/tk_proper_tm.png"></image>
					</view>
					<text class="bottom_text">题库笔记</text>
				</navigator>
 
			</view>
		</view>

 
		<view class="shua_div">
			<navigator class="shua_item" url="../chapterlist/chapterlist"
				style="background: url(../../static/coursegroup_infobg.png); background-size: 100%;">
				<view class="shua_left_div">
					<view>章节练习</view>
					<view>今日未做章节题</view>
				</view>
				<image class="shua_right_img" src="../../static/new_icon_tk_zjlx.png"></image>
			</navigator>

			<navigator class="shua_item" 	 :url="'../testList/testList?cid='+this.cid+'&cname='+this.cname"		
				style="background: url(../../static/coursegroup_infobg.png);  background-size: 100%">
				<view class="shua_left_div">
					<view>模拟试题</view>
					<view>今日未做章节题</view>
				</view>
				<image src="../../static/new_icon_tk_zjlx.png"></image>
			</navigator>

			<view class="shua_item"
				style="background: url(../../static/coursegroup_infobg.png);  background-size: 100%"
				@click="showNum(1)">
				<view class="shua_left_div">
					<view>每日一练</view>
					<view>今日未做章节题</view>
				</view>
				<image src="../../static/new_icon_tk_zjlx.png"></image>
			</view>

			<view class="shua_item" 
			style="background: #ffffff; border: 1px solid #dadada;  background-size: 100%"
				@click="showNum(2)">
				<view class="shua_left_div">
					<view>自我测试</view>
					<view>今日未做章节题</view>
				</view>
				<image src="../../static/new_icon_tk_zjlx.png"></image>
			</view>

			<!-- <view class="shua_item" style="background: #ffffff; border: 1px solid #dadada;  background-size: 100%">
				<view class="shua_left_div">
					<view>做题挑战</view>
					<view>今日未做章节题</view>
				</view>
				<image src="../../static/new_icon_tk_zjlx.png"></image>
			</view> -->

			<navigator class="shua_item" 
			style="background: #ffffff; border: 1px solid #dadada;  background-size: 100%"
			url="../examList/examList">
				<view class="shua_left_div">
					<view>考试测试</view>
					<view>今日未做章节题</view>
				</view>
				<image src="../../static/new_icon_tk_zjlx.png"></image>
			</navigator>

		</view>

		<view class="jiang_top">老师讲解历年真题</view>

		<list class="list_div">
			<cell class="list_item" v-for="(item,index) in videoList"  @tap="courseDetail(index)">
				<image src="../../static/png_mryj.png"></image>
				<view class="item_right">
					<view>{{item.courseName}}</view>
					<view>做完真题听讲解</view>
				</view>
			</cell>
		</list>
		
		
		<view class="bottom_div" v-show="bottomSHow">
			<list>
				<cell v-for="(item,index) in courseList" :key="index" @tap="courseItemClicks(index)">
					{{item.name}}
				</cell>
		<cell>
		</cell>
			</list>
		
		</view>
		<testNum v-if="numShow" :numList="numList" @selNum="selNum"></testNum>
	</view>


</template>

<script>
	import titleTop from '../../components/title/title.vue';
	import testNum from '../../components/setTestNum/setTestNum.vue'
	export default {
		components: {
			titleTop,
			testNum
		},
		data(){ 
			return{
				bottomSHow: false,//是否显示选择课程 
				currCourse:'',//当前课程  
				courseList: [], //课程数据
				numList:[10,30,50,100],
				numShow:false,//是否弹出选择练题条数窗口
				ind:0,//1表示每日练习 2表示自我测试
				cid:uni.getStorageSync('cid'),
				cname:uni.getStorageSync('cname'),
				videoList:[],
				userInfo:{}
			}
		}, 
		
		onReady:function(){
			this.getVideoList();
			// this.getUserInfo();
			   this.currCourse=uni.getStorageSync('cname');
				uni.request({
					url: this.baseUrl+'getCourseByStuId', //仅为示例，并非真实接口地址。
					method:'POST',
					data: {
						stuId: uni.getStorageSync('uid')
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						
						this.courseList = res.data.courseEntity;
						this.text = 'request success';
					}
				});
				uni.request({ 
					url:this.baseUrl + 'student/getStudent',
					method: 'GET',
					data:{
						'stuId':uni.getStorageSync('uid')
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.userInfo=res.data.data;
					}
				})
				
			},
		
		methods:{
			getVideoList:function(){
				uni.request({
					url:this.baseUrl+'getExplainVideo',
					method:'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.videoList = res.data.data;
						
					}
				})
			},
			getCourse:function(){
				this.bottomSHow=true;  
				//获取课程				
			},
			courseItemClicks: function(index){
				this.currCourse=this.courseList[index].name;
				this.cid=this.courseList[index].id;//课程id
				this.cname=this.courseList[index].name;//课程id
				
				//把当前选择的课程存起来
				uni.setStorageSync('cid',this.courseList[index].id);
				uni.setStorageSync('cname',this.courseList[index].name);
				
				this.bottomSHow=false;
			},
			selNum:function(num){
				//获取每日一练选择了多少道题
				console.log(num);//通过num去获取每日一练的题
				this.numShow=false;
				if(num>0){
					if(this.ind==1){
					
						//跳转到每日一练
						uni.navigateTo({
							url:'../testDay/testDay?num='+num
						})
					}else if(this.ind==2){
						//跳转到自我测试
						uni.navigateTo({
							url:'../testSelf/testSelf?num='+num
						})
					}
				}
				
			},
			showNum:function(ind){
				//ind=1表示是每日一练点击的
				//ind=2 表示是自我测试点击的
				this.numShow=true;
				this.ind=ind;
			},
			courseDetail:function(index){
				var id=this.videoList[index].id;
				
				//课程详情
				uni.navigateTo({
					url:'../mycourseDetail/mycourseDetail?id='+id+'&type=2',//2代表是讲解 1是课程
				});
			},
			// getUserInfo:function(){
			// 	//获取当前课程
			// 	var uid=uni.getStorageSync('uid');
			// 	var that=this;
			// 	uni.request({
			// 		url:this.baseUrl + 'student/getStudent',
			// 		method: 'GET',
			// 		data:{
			// 			'stuId':uid
			// 		},
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
			// 		},
			// 		success: (res) => {						
			// 			that.currCourse=res.data.data.courseName;
			// 		}
			// 	})
			// }
		}
	}
</script>

<style>
	.record_div {
		background: #FFFFFF;
	}

	.record_div .top_div {
		display: flex;
		align-items: center;
		height: 84rpx;
		font-size: 24upx;
		color: #777777;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.record_div .top_div text:nth-child(1) {
		flex: 20;
		font-size: 28upx;
		color: #333333;
	}

	.record_div .top_div text:nth-child(2) {
		margin-right: 20rpx;

	}

	.cont_div {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.cont_div .cont_item_div {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-items: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.cont_div .cont_item_div image {
		width: 40rpx;
		height: 44rpx;
	}


	.cont_div .cont_item_div .bottom_text {
		margin-top: 28rpx;
		font-size: 22rpx;
		color: #333333;
	}

	.cont_div .cont_item_div .one_text {
		margin-top: 18rpx;
	}

	.shua_div {
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
		flex-wrap: wrap;

	}

	.shua_div .shua_item {

		width: 39%;
		height: 106rpx;
		margin-left: 2%;
		margin-right: 2%;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
		box-shadow: 3px 3px 3px #999999;

	}

	.shua_div .shua_item image {
		width: 60rpx;
		height: 60rpx;
	}

	.shua_div .shua_item .shua_left_div view:nth-child(1) {
		font-size: 24rpx;
		color: #333333;
	}

	.shua_div .shua_item .shua_left_div view:nth-child(2) {
		font-size: 22rpx;
		color: #999999;
	}

	.jiang_top {
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 82rpx;
		padding-left: 20rpx;
	}

	.list_div .list_item {
		background: #FFFFFF;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		box-shadow: 3px 3px 3px #f3f3f3;
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #E8E8E8;

	}

	.list_div .list_item image {
		width: 166rpx;
		height: 120rpx;
	}

	.list_div .list_item .item_right {
		margin-left: 20rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.list_div .list_item .item_right view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
	}

	.list_div .list_item .item_right view:nth-child(2) {
		margin-top: 20rpx;

	}
	
	.bottom_div {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	
	}
	
	.bottom_div list {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		background: #FFFFFF;
		flex-direction: column;
	}
	
	.bottom_div list cell {
		text-align: center;
		height: 88rpx;
		border-bottom: 1px solid #DADADA;
		line-height: 88rpx;
	
	}
</style>
